<template>
    <div class="issue-main guanwang-bg" style="height: calc(100vh - 124px);border-radius: 10px">
      <div class="show-issue" :style="{marginTop:100 * (10 / screensStore.bodyHeight) + 'vh',
    paddingLeft:100 * (10 / screensStore.bodyWidth) + 'vw',paddingRight:100 * (10 / screensStore.bodyWidth) + 'vw',
    marginBottom:100 * (10 / screensStore.bodyHeight) + 'vh'}"
           v-loading="loading"
           element-loading-text="期次信息加载中...">
        <div style="width: 100%;">
          <el-form style="display: flex;align-items: center">
            <el-form-item label="年份">
              <el-date-picker v-model="segmentedValue" type="year" placeholder="选择年份查询期次"
                              @change="changeSe" value-format="YYYY"
              />
            </el-form-item>
          </el-form>
        </div>
        <el-row :gutter="27" v-if="isYeadEmpty && isYearProjectEmpty" >
          <!--      带循环体-->
          <el-col :span="4.8" v-for="item in yearProjectArr" :key="item.id">
            <div style="cursor: pointer" class="hover-big-size">
              <div style="height: 7px;width: 240px;background: rgb(0,188,156);border-top-left-radius: 5px;
      border-top-right-radius: 5px"></div>
              <div style="width: 240px;height: 180px;background: linear-gradient(to right, white, #e0f7fa);padding: 10px;display: flex;flex-direction: column;
        justify-content: space-between;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px">
                <div>
                  <span class="iconfont icon-xiaoyuandian" style="color: rgb(0,188,156)"></span>
                  <span style="color: #00BC9C;font-size: 14px;margin-left: 5px">{{item.state}}</span>
                </div>
                <div style="color: #484848;font-size:14px;" class="over-line">
                  <el-tooltip :content="item.periodName" placement="top" effect="light">
                    {{item.periodName}}
                  </el-tooltip>
                </div>
                <div class="fixed-row" style="justify-content: space-between">
                  <div style="font-size: 12px;color: #aaa">
                    <span>{{item.createStartTime}}</span>
                    <span> - </span>
                    <span>{{item.createEndTime}}</span>
                  </div>
                  <div>
                    <el-button
                      type="primary"
                      size="mini" round
                      @click="toPlanvisit(item)"
                    >
                      进入
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div v-if="isYeadEmpty && !isYearProjectEmpty" style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%">
          <el-empty description="该年份下暂无期次信息" />
        </div>
      </div>
    </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import {useRouter} from 'vue-router'
  import {screenStore} from '~/stores/modules/screen'
  import { getYearFront,getYearProjectSet } from '~/api/project'
  const screensStore = screenStore()
  const isYeadEmpty = ref(false)
  const isYearProjectEmpty = ref(false)
  const loading = ref(false)
  const router = useRouter()
  const yearProjectArr = ref([])
  const segmentedValue = ref()

  function toPlanvisit(item){
    const qiciInd = screensStore.menuNav.findIndex(res => res.name == '期次选择')
    if(qiciInd != -1){
      screensStore.periodId = item.id
      screensStore.selPeriodObj = {
        ...item
      }
      if(screensStore.roles.findIndex(roleItem => roleItem == 'staff') != -1){
        screensStore.activeHomeNav = screensStore.menuNav[qiciInd+2].name
        router.push({path:screensStore.menuNav[qiciInd+2].path,query:{periodId:item.id}})
      }
      else{
        screensStore.activeHomeNav = screensStore.menuNav[qiciInd+1].name
        router.push({path:screensStore.menuNav[qiciInd+1].path,query:{periodId:item.id}})
      }

    }
    else{
      ElMessage.error('系统错误！请稍后再试')
    }
  }

  onMounted(()=>{
    getYearFront(screensStore.selProjectId).then(res=>{
      if(res.code == 200){
        if(res.data && res.data.length){
          isYeadEmpty.value = true
          segmentedValue.value = new Date().getFullYear() + ''
          getYearProject()
        }
        else{
          isYeadEmpty.value = false
        }
      }
      else{
        isYeadEmpty.value = false
        ElMessage.error(res.msg)
      }
    })
  })

  function onSearchList(){
    yearProjectArr.value = []
    getYearProject()
  }

  function onClearList(){
    segmentedValue.value = new Date().getFullYear()
    getYearProject()
  }
  function changeSe(val){
    segmentedValue.value = val
    getYearProject()
  }
  function getYearProject(){
    loading.value = true
    getYearProjectSet({projectId:screensStore.selProjectId,year:segmentedValue.value}).then(res=>{
      setTimeout(()=>{
        loading.value = false
      },1500)
      if(res?.code === 200){
        if(res.data && res.data.length){
          if(screensStore.roles.findIndex(role => role == 'wangdian' || role == 'level') != -1){
            yearProjectArr.value = res.data.filter(item => item.state == '已发布' || item.state == '已完成')
            if(yearProjectArr.value.length){
              isYearProjectEmpty.value = true
            }
            else{
              isYearProjectEmpty.value = false
            }
          }
          else{
            yearProjectArr.value = res.data
            isYearProjectEmpty.value = true
          }

        }
        else{
          isYearProjectEmpty.value = false
        }
      }
      else{
        isYearProjectEmpty.value = false
        ElMessage.error(res.msg)
      }
    }).catch(()=>{
      loading.value = false
    })
  }

</script>

<style scoped lang="less">
  .show-issue {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    ::v-deep .el-col {
      margin-bottom: 20px;
    }
  }

  .over-line {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .hover-big-size:hover{
    transform: translateY(-5px) scale(1.02);
    transition: all 0.5s;
  }
</style>
